<template>
	<view>
		<tn-nav-bar :isBack='true' :backTitle='" "' :bottomShadow='false' :alpha="alpha">出行订单</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="con">
			<tn-sticky :customNavHeight='vuex_custom_bar_height'>
				<view class="tabs" :style="{background:!alpha?'#fff':''}">
					<tn-tabs :list="list" :current="current" itemWidth='50%' activeColor="#1E1E1E"
						inactiveColor="#868A8B" :barWidth='32' :barHeight='11'
						:barStyle="{background:'#45C47B',marginTop:'10rpx'}" :height='80' @change="change"
						:isScroll='false' :fontSize="28" :bold='true'></tn-tabs>
				</view>
			</tn-sticky>
			<loading v-if="loading"></loading>
			<view class="list" v-else>
				<view class="list__item" v-for="(item,index) in orderlist" :key="index">
					<view class="list__item__no">
						订单编号: {{item.order_sn}}
					</view>
					<view class="list__item__mid">
						<view class="tn-flex" style="width: 100%;">
							<image :src="item.imgs?URL(item.imgs[0]):'/static/logo.png'" class="list__item__pic"
								mode="aspectFill"></image>
							<view class="list__item__center">
								<view class="list__item__name">
									{{item.name}}
								</view>
								<view class="list__item__price">
									<text
										style="font-family: PingFang-SC-Heavy;font-size: 24rpx;">￥</text>{{item.price?item.price:0}}
								</view>
							</view>
						</view>

					</view>
					<view class="list__item__bottom">
						<view class="list__item__num">
							数量 <image src="/static/product/cha.png" class="cha" mode=""></image> {{item.num?item.num:1}}
							<view class="" style="margin: 0 10rpx;">

							</view>
							日期:{{timeFormat(item.createtime,'mm/dd')}}
						</view>
						<tn-button v-if="item.status==2" fontColor="#FFFFFF" shape='round'
							width='158rpx' height='64rpx' :fontSize='25' backgroundColor="tn-bg-lv" @click="queren(item)">确认完成</tn-button>
						<tn-button v-if="item.status==3" fontColor="#FFFFFF" shape='round'
							width='158rpx' height='64rpx' :fontSize='25' backgroundColor="tn-bg-lv1">已完成</tn-button>
						<!-- <tn-button v-if="item.pay_state==1" fontColor="#FFFFFF" shape='round' width='158rpx'
							height='64rpx' :fontSize='25' backgroundColor="tn-bg-lv2">确认支付</tn-button> -->
					</view>
				</view>



				<view class="tn-safe-area-inset-bottom">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				list: [{
						name: '已预约',
						status:2
					}, {
						name: '已报名',
						status:2
					},{
						name: '已完成',
						status:3
					}
				],
				status: 2,
				current: 0,
				alpha: true,
				orderlist: [],
				s:'',
				loading:true
			};
		},
		methods: {
			change(index) {
				this.current = index;
				this.status = this.list[index].status
				this.getlist()
			},
			queren(item){
				let _this=this
				uni.showModal({
					title:'是否确认完成？',
					success(r) {
						if(r.confirm){
							user.finishOrder({id:item.id}).then(res=>{
								if(res.data.code==1){
									_this.getlist()
								}
							})
						}
					}
				})
			},
			getlist() {
				this.loading=true
				user.myorder({
					type: 1,
					status:this.status
				}).then(res => {
					if (res.data.code == 1) {
						res.data.data.map(t => {
							if (t.image) {
								t.imgs = t.image.split(',').filter(Boolean)
							}

						})

						this.orderlist = res.data.data
						this.loading=false
					}
				})
			}
		},
		onLoad() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.tabs {
		border-top: 2rpx solid #F4F6F8;
		padding: 10rpx 0;
	}

	.con {
		position: relative;
	}

	.list {
		padding: 0 30rpx;

		&__item {
			padding: 40rpx 24rpx 28rpx 30rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-bottom: 26rpx;

			&__no {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #606060;
				line-height: 26rpx;
				margin-bottom: 40rpx;
			}

			&__mid {
				display: flex;
				align-items: center;
				// justify-content: space-between;

			}

			&__pic {
				width: 139rpx;
				height: 139rpx;
				border-radius: 10rpx;
			}

			&__center {
				height: 130rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 26rpx;
				width: 430rpx;
				padding: 3rpx 0 6rpx;
			}

			&__name {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #1E1E1E;
				line-height: 48rp;
				margin-bottom: 20rpx;
			}

			&__addr {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #6A6A6A;

			}

			&__num {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #6A6A6A;
				display: flex;
				align-items: center;
			}

			&__price {
				font-family: DINNextLTPro-Bold;
				font-weight: bold;
				font-size: 38rpx;
				color: #FD2A00;
				line-height: 38rpx;
			}

			&__bottom {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #6A6A6A;
				line-height: 24rpx;
				justify-content: space-between;
				display: flex;
				align-items: center;
				margin-top: 30rpx;
			}
		}

	}

	.cha {
		width: 16rpx;
		height: 16rpx;
		margin: 0 6rpx;
	}
</style>